<template>
  <div class="login-container">
    <img src="https://placehold.co/600x400" alt="登录背景图" />
    <div class="login-form">
      <van-tabs v-model:active="activeTab">
        <van-tab title="登录">
          <van-cell-group inset>
            <van-field v-model="phoneNumber" label="手机号码" placeholder="请输入手机号码" clearable />
            <!-- 修改 right-icon 和 button 的逻辑 -->
            <van-field
                v-model="smsCode"
                label="验证码"
                placeholder="请输入验证码"
                clearable
            >
              <template #button>
                <van-tag
                    :type="countdown > 0 ? 'primary' : 'success'"
                    :disabled="countdown > 0"
                    @click="getSmsCode"
                >
                  {{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
                </van-tag>
              </template>
            </van-field>
          </van-cell-group>
          <van-button type="primary" block @click="handleLogin">登录</van-button>
        </van-tab>
        <van-tab title="注册">
          <van-cell-group inset>
            <van-field v-model="phoneNumber" label="手机号码" placeholder="请输入手机号码" clearable />
          </van-cell-group>
          <van-button type="primary" block @click="handleRegister">注册</van-button>
        </van-tab>
      </van-tabs>
      <div class="other-login-methods">
        <p>其他方式登录</p>
        <div class="social-login-buttons">
          <van-icon name="wechat" />
          <van-icon name="weibo" />
          <van-icon name="qq" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '登录',
      phoneNumber: '',
      smsCode: '',
      countdown: -1
    };
  },
  methods: {
    handleLogin() {
      // 检查手机号码和验证码是否为空
      if (!this.phoneNumber) {
        alert('请输入手机号码');
        return;
      }
      if (!this.smsCode) {
        alert('请输入验证码');
        return;
      }

      // 调用 /api/sms/verify 接口
      this.verifyVerificationCode();
    },
    async verifyVerificationCode() {
      try {
        const response = await this.$axios.post('/api/sms/verify', {
          phoneNumber: this.phoneNumber,
          code: this.smsCode
        });

        // 根据返回的 JSON 数据判断请求是否成功
        if (response.data.code === 0 && response.data.success) {
          this.$router.push('/welcome');
        } else {
          // 请求失败，显示错误信息
          alert(`验证码验证失败：${response.data.message}`);
        }
      } catch (error) {
        console.error('验证码验证错误:', error);
        if (error.response && error.response.status === 403) {
          alert('验证码验证失败：无权访问该资源，请检查权限或联系管理员。');
        } else {
          alert('验证码验证失败，请稍后再试');
        }
      }
    },
    async getSmsCode() {
      if (!this.phoneNumber) {
        alert('请输入手机号码');
        return;
      }
      if (this.countdown > 0) return;

      try {
        // 使用全局的 $axios 调用后端接口发送验证码
        const response = await this.$axios.post('/api/sms/send', {
          phoneNumber: this.phoneNumber
        });

        // 根据返回的 JSON 数据判断请求是否成功
        if (response.data.code === 0 && response.data.success) {
          // 请求成功，启动倒计时
          this.countdown = 60;
          const timer = setInterval(() => {
            this.countdown--;
            if (this.countdown <= 0) {
              clearInterval(timer);
              this.countdown = -1;
            }
          }, 1000);

          alert('验证码已发送，请注意查收！');
        } else {
          // 请求失败，显示错误信息
          alert(`发送验证码失败：${response.data.message}`);
        }
      } catch (error) {
        console.error('发送验证码错误:', error);
        if (error.response && error.response.status === 403) {
          alert('发送验证码失败：无权访问该资源，请检查权限或联系管理员。');
        } else {
          alert('发送验证码失败，请稍后再试');
        }
      }
    },
    handleRegister() {
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-form {
  width: 80%;
  margin-top: 20px;
}

.other-login-methods {
  margin-top: 20px;
  text-align: center;
}

.social-login-buttons {
  display: flex;
  justify-content: space-around;
}
</style>
